<template>
    <Swiper class="swiper-box" :options="swiperOptions">
        <SwiperSlide v-for="(item, index) in list" :key="index">
            <div class="swiper-item">
                <img :src="item.imgUrl" alt="" class="d-block" />
            </div>
        </SwiperSlide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </Swiper>
</template>
<script>
 import { getLoop } from "../../../api/request";
import {Swiper,SwiperSlide} from 'vue-awesome-swiper'; // 导入swiper
    import 'swiper/css/swiper.css'; // 导入swiper样式
    export default {
        data() {
            return {
                list: [],
                swiperOptions: { // swiper配置项
                    spaceBetween: 30, // 间距
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项
                    autoplay: { // 自动切换
                        delay: 2000, // 切换时间
                        disableOnInteraction: false, // 切换后不停止
                    },
                    pagination: { // 分页器
                        el: '.swiper-pagination', // 分页器元素
                        clickable: true, // 分页器可点击
                    },
                    navigation: { // 左右切换
                        nextEl: '.swiper-button-next', // 下一个元素
                        prevEl: '.swiper-button-prev', // 上一个元素
                    },
                }
            };
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        methods: {},
        beforeCreate() {},
        created() {
            getLoop(5).then(res => {
                console.log(res.data);
                this.list = res.data;
            });
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
    };
</script>
<style lang="scss" scoped>
    .swiper-box {
        min-width: 100%;
        background: #fff;
        border-radius: 8px;
        padding: 16px;
        .swiper-pagination {
            position: absolute;
            text-align: center;
            transition: opacity .3s;
            transform: translateZ(0);
            z-index: 10;
        }
        .swiper-item {
            width: 100%;
            height: 400px;
        }
        .d-block {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 16px;
        }
        .swiper-button-next, .swiper-button-prev {
            position: absolute;
            top: 50%;
            width: 27px;
            height: 44px;
            margin-top: -22px;
            z-index: 10;
            cursor: pointer;
            background-size: 27px 44px;
            background-position: 50%;
            background-repeat: no-repeat;
        }
    }
</style>